<template>
  <div>
    <div class="grid-content bg-purple">
      <div class="content content1 ">
        <div class="header">
          <div class="title">
            产品热榜
            <span class="time">{{ $store.getters.startTime }} ~ {{ $store.getters.endTime }}</span>
          </div>
        </div>
        <div class="body2">
          <el-row v-for="(item,index) in skuTopList" :key="index">
            <el-col :span="5">
              <div class="rank" :class="{top1:index===0,top2:index===1,top3:index===2}">{{ index+1 }}</div>
            </el-col>
            <el-col :span="13">
              <div class="name">{{ item.skuName }}</div>
            </el-col>
            <el-col :span="6">
              <div class="count">{{ item.count }}单</div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { skuTop } from '@/api'
export default {
  data() {
    return {
      skuTopList: []
    }
  },
  async created() {
    const res = await skuTop({
      topValue: 10,
      start: `${this.$store.getters.startTime}`,
      end: `${this.$store.getters.endTime}`
    })
    console.log(res)
    this.skuTopList = res.data
  }

}
</script>

<style lang="scss" scoped>
@import "~@/styles/hot-product.scss";
.content1{
  background-color: #fff !important;
  background-image: none !important;
  display: flex;
  flex: 1;
}
.top1 {
  width: 21px !important;
  height: 20px !important;
  background: url() !important;
  color: #8e5900 !important;
}
.top2{
  width: 21px !important;
    height: 20px !important;
    background: url() !important;
    color: #494949 !important;
}
.top3{
  width: 21px !important;
    height: 20px !important;
    background: url() !important;
    color: #cf6d3d !important;
}
.grid-content{
  display: flex;
}
.el-row{
  margin-top: 8px;
}
</style>
